<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天天生鲜</title>
    <link rel="stylesheet" href="../img/images/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
</head>

<body>
    <div class="top-nav">
        <ul class="row">
            <li>欢迎来到天天生鲜！</li>
            <li class="space"></li>
            <li>登录</li>
            <li>|</li>
            <li>注册</li>
            <li>|</li>
            <li>用户中心</li>
            <li>|</li>
            <li>我的购物车</li>
            <li>|</li>
            <li>我的订单</li>
        </ul>
    </div>
    <div class="main">
        <div class="top-search">
            <img src="../img/images/logo.png" alt="">
            <div class="serch-box">
                <input type="text" placeholder="请输入商品名称">
                <span>搜索</span>
            </div>
            <div class="cart-box">
                <div class="cart-text">我的购物车</div>
                <div class="cart-num">1</div>
            </div>
        </div>
    </div>
    <div class="cate-titbox">
        <ul class="cate">
            <h2>全部商品</h2>
            <li>手机</li>
            <li>|</li>
            <li>手机生鲜</li>
            <li>|</li>
            <li>抽奖</li>
        </ul>
    </div>
    <div class="slider-box">
        <ul>
            <li>新鲜水果</li>
            <li>海鲜水产</li>
            <li>猪肉羊肉</li>
            <li>禽类蛋品</li>
            <li>新鲜蔬菜</li>
            <li>速冻食品</li>
        </ul>
        <div class="slider">
            <div class="arrow-left"></div>
            <div class="arrow-right"></div>
            <div class="slider-item">
                <img src="../img/images/slide01.jpg">
                <img src="../img/images/slide02.jpg">
                <img src="../img/images/slide03.jpg">
            </div>

        </div>
        <div class="adver">
            <img src="../img/images/adv01.jpg" alt="">
            <img src="../img/images/adv02.jpg" alt="">
        </div>
    </div>
    <div class="g-tit">
        <div class="tit">新鲜水果</div>
        <div>|</div>
        <div>鲜芒</div>
        <div>加州提子</div>
        <div>亚马逊牛油果</div>
        <div class="space"></div>
        <div>查看更多</div>
    </div>
    <div>
        <div class="g-list">
            <div class="g-cate"></div>
            <div class="g-goods">
                <div class="tit"> 草莓</div>
                <img src="../img/images/goods/goods003.jpg">
                <div class="price">
                    ￥30.00
                </div>
            </div>
            <div class="g-goods">
                <div class="tit">葡萄</div>
                <img src="../img/images/goods/goods002.jpg">
                <div class="price">
                    ￥5.50
                </div>
            </div>
            <div class="g-goods">
                <div class="tit"> 柠檬</div>
                <img src="../img/images/goods/goods001.jpg">
                <div class="price">
                    ￥3.90
                </div>
            </div>
            <div class="g-goods">
                <div class="tit">奇异果</div>
                <img src="../img/images/goods/goods012.jpg">
                <div class="price">
                    ￥25.80
                </div>
            </div>
        </div>
        <div class="g-tit">
            <div class="tit">海鲜水产</div>
            <div>|</div>
            <div>河虾</div>
            <div>扇贝</div>
            <div class="space"></div>
            <div>查看更多</div>
        </div>
        <div>
            <div class="g-list">
                <div class="g-cate" style="background-image: url(../img/images/banner02.jpg);"></div>
                <div class="g-goods">
                    <div class="tit">青岛野生海捕大青虾</div>
                    <img src="../img/images/goods/goods018.jpg">
                    <div class="price">
                        ￥48.00
                    </div>
                </div>
                <div class="g-goods">
                    <div class="tit">扇贝</div>
                    <img src="../img/images/goods/goods019.jpg">
                    <div class="price">
                        ￥46.00
                    </div>
                </div>
                <div class="g-goods">
                    <div class="tit">冷冻秋刀鱼</div>
                    <img src="../img/images/goods/goods020.jpg">
                    <div class="price">
                        ￥19.00
                    </div>
                </div>
                <div class="g-goods">
                    <div class="tit">黑虎虾</div>
                    <img src="../img/images/goods/goods021.jpg">
                    <div class="price">
                        ￥25.00
                    </div>
                </div>
            </div>
            <div class="g-tit">
                <div class="tit">猪肉羊肉</div>
                <div>|</div>
                <div>南阳猪肉</div>
                <div>新疆羊肉</div>
                <div class="space"></div>
                <div>查看更多</div>
            </div>
            <div>
                <div class="g-list">
                    <div class="g-cate" style="background-image: url(../img/images/banner03.jpg);"></div>
                    <div class="g-goods">
                        <div class="tit">黑香猪五花肉</div>
                        <img src="../img/images/goods/goods022.jpg">
                        <div class="price">
                            ￥22.00
                        </div>
                    </div>
                    <div class="g-goods">
                        <div class="tit">牛肩肉</div>
                        <img src="../img/images/goods/goods023.jpg">
                        <div class="price">
                            ￥32.00
                        </div>
                    </div>
                    <div class="g-goods">
                        <div class="tit">羊肉</div>
                        <img src="../img/images/goods/goods024.jpg">
                        <div class="price">
                            ￥32.00
                        </div>
                    </div>
                    <div class="g-goods">
                        <div class="tit">新鲜牛排</div>
                        <img src="../img/images/goods/goods025.jpg">
                        <div class="price">
                            ￥25.00
                        </div>
                    </div>
                </div>
                <div class="g-tit">
                    <div class="tit">禽类蛋品</div>
                    <div>|</div>
                    <div>新鲜鸡蛋</div>
                    <div>家养柴鸡</div>
                    <div class="space"></div>
                    <div>查看更多</div>
                </div>
                <div>
                    <div class="g-list">
                        <div class="g-cate" style="background-image: url(../img/images/banner04.jpg);"></div>
                        <div class="g-goods">
                            <div class="tit">鸡蛋</div>
                            <img src="../img/images/goods/goods026.jpg">
                            <div class="price">
                                ￥10.00
                            </div>
                        </div>
                        <div class="g-goods">
                            <div class="tit">鸡胸肉</div>
                            <img src="../img/images/goods/goods027.jpg">
                            <div class="price">
                                ￥32.00
                            </div>
                        </div>
                        <div class="g-goods">
                            <div class="tit">咸鸭蛋</div>
                            <img src="../img/images/goods/goods028.jpg">
                            <div class="price">
                                ￥5.00
                            </div>
                        </div>
                        <div class="g-goods">
                            <div class="tit">鸡腿</div>
                            <img src="../img/images/goods/goods029.jpg">
                            <div class="price">
                                ￥15.00
                            </div>
                        </div>
                    </div>
                    <div class="g-tit">
                        <div class="tit">新鲜蔬菜</div>
                        <div>|</div>
                        <div>香菜</div>
                        <div>芹菜</div>
                        <div class="space"></div>
                        <div>查看更多</div>
                    </div>
                    <div>
                        <div class="g-list">
                            <div class="g-cate" style="background-image: url(../img/images/banner05.jpg);"></div>
                            <div class="g-goods">
                                <div class="tit">大白菜</div>
                                <img src="../img/images/goods/goods030.jpg">
                                <div class="price">
                                    ￥1.00
                                </div>
                            </div>
                            <div class="g-goods">
                                <div class="tit">芹菜</div>
                                <img src="../img/images/goods/goods031.jpg">
                                <div class="price">
                                    ￥7.00
                                </div>
                            </div>
                            <div class="g-goods">
                                <div class="tit">香菜</div>
                                <img src="../img/images/goods/goods032.jpg">
                                <div class="price">
                                    ￥6.00
                                </div>
                            </div>
                            <div class="g-goods">
                                <div class="tit">冬瓜</div>
                                <img src="../img/images/goods/goods033.jpg">
                                <div class="price">
                                    ￥3.00
                                </div>
                            </div>
                        </div>
                        <div class="g-tit">
                            <div class="tit">速冻食品</div>
                            <div>|</div>
                            <div>汤圆</div>
                            <div>年糕</div>
                            <div class="space"></div>
                            <div>查看更多</div>
                        </div>
                        <div>
                            <div class="g-list">
                                <div class="g-cate" style="background-image: url(../img/images/banner06.jpg);"></div>
                                <div class="g-goods">
                                    <div class="tit">鱼丸</div>
                                    <img src="../img/images/goods/goods034.jpg">
                                    <div class="price">
                                        ￥10.00
                                    </div>
                                </div>
                                <div class="g-goods">
                                    <div class="tit">蟹柳</div>
                                    <img src="../img/images/goods/goods035.jpg">
                                    <div class="price">
                                        ￥7.00
                                    </div>
                                </div>
                                <div class="g-goods">
                                    <div class="tit">手拍虾丸</div>
                                    <img src="../img/images/goods/goods036.jpg">
                                    <div class="price">
                                        ￥15.00
                                    </div>
                                </div>
                                <div class="g-goods">
                                    <div class="tit">玉米蔬菜猪肉蒸饺</div>
                                    <img src="../img/images/goods/goods037.jpg">
                                    <div class="price">
                                        ￥15.00
                                    </div>
                                </div>
                            </div>
                            <div class="bottom">
                                    <ul class="row">
                                        <li>关于我们</li>
                                        <li>|</li>
                                        <li>联系我们</li>
                                        <li>|</li>
                                        <li>招聘人才</li>
                                    </ul>
                                    <p>
                                        CopyRight&copy; 2023 22级移动应用开发班
                                    </p>
                                    <p>
                                        电话:13271391715&nbsp;&nbsp; QQ:1677760289@qq.com
                                    </p>
                                </div>
</body>
<script src="../wu.js"></script>
<script>
    $(document).ready(function () {
        let sliderIndex = 0;
        //有几张图片我切换几张
        function changeSlider(idx = 0) {
            let $sliderItems = $(".slider-item img");//上面三个图片标签
            for (let i = 0; i < $sliderItems.length; i++) {
                if (i == idx) {//调用方法的参数idx和i相等 显示对应元素图片
                    $($sliderItems[i]).slideDown(500)
                } else {//否则隐藏
                    $($sliderItems[i]).slideUp(500)
                }
            }
        }
        changeSlider(sliderIndex);//默认显示第一张图片
        //左切换
        $(".arrow-left").click(function () {
            //sliderIndex - 1显示前面一张 但是怕遇到问题已经到第一张 怎么切换到最后一张
            sliderIndex = sliderIndex - 1;
            if (sliderIndex < 0) {//显示的索引小于0给你赋值成最后一个图片的索引
                sliderIndex = $(".slider-item img").length - 1;//选择器长度3 有3张图片
                //第三张图片索引是3-1
            }
            //showIndex已经是将要显示的图片索引了
            changeSlider(sliderIndex)
        })
        //右切换
        $(".arrow-right").click(function () {
            sliderIndex = sliderIndex + 1;
            //显示的索引大于组最后一张图片索引 把sliderIndex设置为0
            if (sliderIndex >= $(".slider-item img").length) {
                sliderIndex = 0;
            }
            changeSlider(sliderIndex)
        })
        //自动播放功能
        setInterval(() => {
            sliderIndex++;
            if (sliderIndex >= $(".slider-item img").length) {
                sliderIndex = 0;
            }
            changeSlider(sliderIndex)
        }, 2000);
    })
</script>

</html>